<template>
    <div>
        <div>
            <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>人事管理</el-breadcrumb-item>
                <el-breadcrumb-item>部门管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr style="border: 1px solid #F2F6FC;">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="userId">
                    <el-input placeholder="userId" type="text" v-model="userId"></el-input>
                </el-form-item>
                <el-form-item label="userRole">
                    <el-select v-model="roleId">
                        <el-option label=" " value=" "></el-option>
                        <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                            :value="item.roleId">{{ item.roleName }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="departName">
                    <el-select v-model="departId">
                        <el-option label=" " value=" "></el-option>
                        <el-option v-for="item in departList" :key="item.departId" :label="item.departName"
                            :value="item.departId">{{ item.departName }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="serchUser(userId, roleId, departId)">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-upload class="upload-demo" ref="upload" action="http://localhost:9999/user/addUserFromExcel"
                        :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
                        :headers="headers" :on-change="handleChange">
                        <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="medium" type="success"
                            @click="submitUpload">导入员工</el-button>
                        <div slot="tip" class="el-upload__tip">请上传excel文件<span><a href="../../员工导入模板.xlsx" download="员工导入模板"
                                    style="margin-left: 20px;">下载模板</a></span></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="序号">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="email" label="邮箱">
                </el-table-column>
                <el-table-column prop="phoneNumber" label="电话">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleView(scope.row.userId)" type="text" size="small">详情</el-button>
                        <el-button @click="updateUser(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteUser(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 详情显示抽屉 -->
        <el-drawer :visible.sync="describleshow" direction="ttb" size="50%" :before-close="handleClose"
            :modal-append-to-body="false">
            <el-descriptions title="用户信息" border v-if="describle.length">
                <el-descriptions-item label="员工编号">{{ this.describle[0].userId }}</el-descriptions-item>
                <el-descriptions-item label="密码">{{ this.describle[0].password }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ this.describle[0].sex }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ this.describle[0].age }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ this.describle[0].email }}</el-descriptions-item>
                <el-descriptions-item label="电话号码">{{ this.describle[0].phoneNumber }}</el-descriptions-item>
                <el-descriptions-item label="姓名">{{ this.describle[0].name }}</el-descriptions-item>
                <el-descriptions-item label="角色">{{ this.roleName }}</el-descriptions-item>
                <el-descriptions-item label="所属部门">{{ this.departName }}</el-descriptions-item>
            </el-descriptions>
        </el-drawer>
    </div>
</template>

<script>
import { getAllUser, delUser, getAllRole, getDepartList, getRoleById, getDepartById } from '@/api/api'
export default {
  data () {
    return {
      fileList: [],
      userId: '',
      tableData: [],
      pageNumber: 1,
      pageSize: 5,
      total: 0,
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: this.$store.state.token
      },
      roleId: null,
      departId: null,
      roleList: [],
      departList: [],
      describle: [],
      describleshow: false,
      token: this.$store.state.token
    }
  },
  methods: {
    submitUpload () {
      // 导入员工
      //   this.$refs.upload.submit()
      const param = new FormData()
      const file = this.fileList[0].raw
      param.append('file', file)
      this.axios({
        url: 'http://localhost:9999/user/addUserFromExcel',
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: this.$store.state.token
        },
        data: param
      }).then(res => {
        console.log(res.data)
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file, fileList) {
      console.log(file)
    },
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    serchUser (userId, roleId, departId) {
      const params = {
        userId: userId,
        roleId: roleId,
        departId: departId,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      getAllUser(params).then(res => {
        this.tableData = res.data.data.userList
        this.total = res.data.data.total
      })
    },
    addUser () {
      this.$router.push('/user/addUser')
    },
    handleView (userId) {
      const params = {
        userId: userId,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      getAllUser(params).then(res => {
        // console.log(res.data)
        this.describle = res.data.data.userList
      })
      getRoleById().then(res => {
        this.roleName = res.data.data.roleName
      })
      getDepartById().then(res => {
        this.departName = res.data.data.departName
      })
      this.describleshow = true
    },
    updateUser (row) {
      //   console.log(row)
      const user = JSON.stringify(row)
      this.$router.push({
        path: '/user/updateUser',
        query: { user }
      })
    },
    deleteUser (id) {
      // console.log(id)
      this.$confirm('确定删除这条记录吗', '提示', {
        confirmButtonText: '确认', // 确认按钮文字更换
        cancelButtonText: '取消', // 取消按钮文字更换
        showClose: true, // 是否显示右上角关闭按钮
        type: 'warning'
      }).then(() => {
        delUser(id).then(res => {
          console.log(res.data)
          this.$message('删除成功!')
          this.$router.go(0)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.serchUser()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this.serchUser()
    },
    SearchRole () {
      getAllRole().then(res => {
        // console.log(res.data)
        this.roleList = res.data.data
      })
    },
    SearchDepart () {
      getDepartList().then(res => {
        // console.log(res.data)
        this.departList = res.data.data
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    }
  },
  mounted () {
    // getUserList('', this.pageNumber, this.pageSize).then(res => {
    //   console.log(res.data)
    //   this.tableData = res.data.list
    //   this.total = res.data.total
    // })
    this.serchUser()
    this.SearchRole()
    this.SearchDepart()
  }
}
</script>

<style lang="scss" scoped>
.departList {
    margin: 20px 0px 0px 0px;
}
</style>
